<style lang='scss'>
#base-info {
  // .convert-dialog > .el-dialog {
  //   width: 1700px;
  // }

  .el-textarea.is-disabled .el-textarea__inner,
  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
    border-color: #e4e7ed;
    color: #606266;
    cursor: not-allowed;
  }

  .form-table {
    .el-table__fixed-header-wrapper > table > thead > tr > th > .cell,
    .el-table__header-wrapper > table > thead > tr > th > .cell {
      padding: 10px 0;
      text-align: center;
      font-weight: bold;
    }
  }

  .el-table-column--selection > .cell {
    text-align: center;
  }
  // .part {
  //   border: 1px solid #ccc;
  //   margin-bottom: 20px;
  //   background-color: #fff;
  //   .table-title {
  //     cursor: pointer;
  //     padding: 10px;
  //     display: flex;
  //     align-items: center;
  //     background-color: #f5f5f5;
  //   }
  // }
  .mt15 {
    margin-top: 15px;
  }

  .button-box {
    text-align: center;
    padding: 20px;
    background-color: #fff;
  }
}
</style>
<template>
  <div id="base-info">
    <Box>
    <SearchContainer>
    <el-form :inline="true" label-width="110px" :model="searchForm" class="query-form mb20">
      <el-form-item label="名称" prop="path">
        <el-input v-model="searchForm.name" placeholder="请输入名称" auto-complete="off"></el-input>
      </el-form-item>
      <div class="tc mb20">
        <el-button type="primary" size="small" icon="el-icon-search" @click="onSearch()">查询</el-button>
        <el-button type="success" size="small" icon="el-icon-plus" @click="addItem({key:'list'})">新增</el-button>
        <el-button type="warning" size="small" icon="el-icon-refresh" @click="searchForm={}">重置</el-button>
      </div>
    </el-form>
    </SearchContainer>
    <el-form :model="modifyForm" :rules="modifyFormRules" ref="modifyForm" :label-position="'' | LABEL_POSITION">
      <el-table
        v-loading="regionLoading"
        element-loading-spinner="el-icon-loading"
        :data="modifyForm.list"
        border
        class="form-table"
        :max-height="maxHeight"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column v-if="type != 'view'" type="selection" width="55" class="tc"></el-table-column> -->

        <el-table-column label="名称" min-width="200">
          <template slot-scope="scope">
            <!-- <span >{{scope.row.name}}</div> -->
            <el-form-item :prop=" 'list.' + scope.$index + '.name' " :rules="modifyFormRules.name" class="mt15" v-if="scope.row.editStatus">
              <el-input
                type="textarea"
                :disabled=" !scope.row.editType "
                :autosize="{ minRows: 1, maxRows: 1}"
                v-model="scope.row.name"
                placeholder="请输入name"
              ></el-input>
            </el-form-item>
            <span :title="scope.row.name" v-else>{{scope.row.name}}</span>          
        </template>
        </el-table-column>
        <el-table-column label="描述" min-width="200">
          <template slot-scope="scope">
            <div v-if="type == 'view'">{{scope.row.desc}}</div>
            <el-form-item v-else :prop=" 'list.' + scope.$index + '.desc' " :rules="modifyFormRules.desc" class="mt15">
              <el-input
                type="textarea"
               
                :autosize="{ minRows: 1, maxRows: 1}"
                v-model="scope.row.desc"
                placeholder="请输入desc"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="是否开启" min-width="80">
          <template slot-scope="scope">
            <!-- <div v-if="type == 'view'">{{scope.row.valve}}</div> -->
            <el-form-item  :prop=" `list.${scope.$index}.valve` " :rules="modifyFormRules.valve" class="mt15">
              <el-select placeholder="请选择" v-model="scope.row.valve">
                <el-option v-for="item in valveOpts" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>

        <!-- <el-table-column label="routerConvertIn" min-width="200">
          <template slot-scope="scope">
            <div v-if="type == 'view'">{{scope.row.convert.in}}</div>
            <el-form-item v-else class="mt15">
              <el-input
                type="textarea"
                :readonly="type == 'view'"
                :autosize="{ minRows: 1, maxRows: 1}"
                v-model="scope.row.convert.in"
                placeholder="请输入routerConvertIn"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="routerConvertOut" min-width="200">
          <template slot-scope="scope">
            <div v-if="type == 'view'">{{scope.row.convert.out}}</div>
            <el-form-item v-else class="mt15">
              <el-input
                type="textarea"
                :readonly="type == 'view'"
                :autosize="{ minRows: 1, maxRows: 1}"
                v-model="scope.row.convert.out"
                placeholder="请输入routerConvertOut"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column> -->

        <el-table-column label="lockKey" min-width="200">
          <template slot-scope="scope">
            <!-- <div v-if="type == 'view'">{{scope.row.lockKey}}</div> -->
            <el-form-item  class="mt15">
              <el-input
                type="textarea"
                :readonly="type == 'view'"
                :autosize="{ minRows: 1, maxRows: 1}"
                v-model="scope.row.lockKey"
                placeholder="请输入lockKey"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <!-- <el-table-column label="unLockKey" min-width="200">
          <template slot-scope="scope">
            <el-form-item class="mt15">
              <el-input
                type="textarea"
                :readonly="type == 'view'"
                :autosize="{ minRows: 1, maxRows: 1}"
                v-model="scope.row.unLockKey"
                placeholder="请输入unLockKey"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>-->
        <el-table-column label="操作" min-width="120" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" :disabled="!scope.row.name" @click="toViewDetail(scope.row)">查看</el-button>
            <el-button type="text" @click="toViewDetail(scope.row,'copy')">复制</el-button>
            <el-button v-if="!scope.row.editType" type="text" @click="onDelRecord({key:'list',row:scope.row})">删除</el-button>
            <el-button v-else type="text" @click="delItem({key:'list',index:scope.$index,row:scope.row})">取消</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-row v-if="type != 'view'">
        <el-col :span="24" class="button-box">
          <el-button type="success" @click="addItem({key:'list'})">新增Item</el-button>
          <el-button :disabled="selection.length == 0" type="warning" @click="delItem({key:'list',findKey:'creator'})">删除Item</el-button>
        </el-col>
      </el-row>-->
    </el-form>
    <el-pagination
      v-if="this.pager.total > 0 "
      :page-sizes="pagination.pageSizes"
      :page-size="pager.pageSize"
      :layout="pagination.layout"
      :total="pager.total"
      :current-page="pager.pageIndex"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
    <!-- <el-row>
      <el-col :span="24" class="button-box">
         <el-button type="primary" @click="onSubmitForm">{{type == 'view' ? '编辑' : '保存'}}</el-button>
        <el-button type="danger" v-if=" type != 'view' " @click="onSubmitForm">删除</el-button>
        <el-button @click="close">关闭</el-button>
      </el-col>
    </el-row>-->
    </Box>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapState, mapMutations } from "vuex";
import SearchContainer from "src/components/common/SearchContainer";
import storage from "src/utils/storage";
import { sendReq, isJSON, copyJSONObj,GetQueryString } from "src/utils/tools";




let beanMappingItem = {
  desc: '',
  name: '',
  valve: '',
  convert: { in: '', out: '' },
  lockKey: '',
  unLockKey: '',
  arrange: [],
  path: "",
  productCode: "",
  zkConfigTypeEnum: "",
  editType: 'add',
  editStatus:true 
};

// Handler编排
export default {
  data() {
    const pagePermissionsMenu = storage.get("pagePermissionsMenu")
      ? storage.get("pagePermissionsMenu")
      : {};
    const inputWarning = (msg) => {
      return [
        {
          required: true,
          message: msg,
          trigger: "blur,change",
        }
      ];
    };
    return {
      searchForm: {},
      zkConfigTypeEnum: '',
      type: 'edit',
      maxHeight: document.documentElement.clientHeight - 90 - 110 - 75,
      modifyForm: {
        list: [copyJSONObj(beanMappingItem)],
      },
      modifyFormRules: {
        name: inputWarning(`请输入name`),
        desc: inputWarning(`请输入desc`),
        valve: inputWarning(`请选择valve`),
      },
      selection: [],
      pager: {
        total: 0,
        pageIndex: 1,
        pageSize: 20,
      },
    };
  },
  computed: {
    ...mapGetters(["pagination", "regionLoading", 'valveOpts'])
  },
  created() {
    this.changeCollapseState(false);
  },
  mounted() {
    this.onSearch();
  },
  methods: {
    ...mapActions(["changeCollapseState"]),
    toViewDetail(item, type = false) {
      let row = JSON.parse(JSON.stringify(item));
      if (type) {
        row.name = '';
        row.desc = '';
        row.convert = {
          in: '',
          out: '',
        };
        row.editType = 'add';
        row.zkConfigTypeEnum = this.zkConfigTypeEnum
      };
      //由于混淆字段的原因 proCode =>productCode
      this.$router.push({ path: `/main/${this.$route.params.productCode}/routerLib/layout/bindCardRouter`, query: {name:item.name,proCode:item.productCode,type,zkConfigTypeEnum:this.zkConfigTypeEnum } })
    },
    onSearch() {
      let pages = {
        pageNum: this.pager.pageIndex,
        pageSize: this.pager.pageSize,
      }
      sendReq({
        url: '/config/getRouterList',
        params: { 
          productCode: this.$route.params.productCode,
          nodeName: this.searchForm.name,
          ...pages 
        },
        cb: (returnData) => {
          if (returnData.data) {
            returnData.data.forEach(e => {
              e.editStatus = false
            })
            this.zkConfigTypeEnum = returnData.zkConfigTypeEnum;
            this.modifyForm.list = returnData.data;
            this.pager.total = returnData.totalRecord;
          }
        }
      })
    },
    copyItem() {

    },
    close() {
      // this.$emit('closeDialog');
    },
    handleSelectionChange(selection) {
      this.selection = selection;
      // console.log(selection);
    },
    addItem(obj) {
      this.$router.push({ path: `/main/${this.$route.params.productCode}/routerLib/layout/bindCardRouter`, query: {type:"add" ,zkConfigTypeEnum:this.zkConfigTypeEnum} })
      //this.modifyForm[obj.key].unshift(copyJSONObj(beanMappingItem));
    },
    delItem(obj) {
      this.$confirm("确定要取消这条记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.modifyForm[obj.key].splice(obj.index, 1);
      })
    },
    //新增&&编辑保存
    onSubmitForm() {

      // if (this.type == 'view') {
      //   this.type = 'edit';
      //   return;
      // }

      let params = {
        valve: this.valve,
      };

      this.$refs.modifyForm.validate(valid => {
        if (valid) {

          this.$confirm("确定要提交数据吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {

          })

        } else {
          this.$message({
            type: "warning",
            message: "请检查表单必填项!"
          });
        }
      });
    },
    // 删除
    onDelRecord(params) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        sendReq({
          url: '/config/deleteNode',
          params: { path: params.row.path },
          note: true,
          cb: (data) => {
            this.onSearch();
          }
        })
      })
    },
    handleSizeChange(pageSize) {
      this.pager.pageSize = pageSize;
      this.onSearch();
    },
    handleCurrentChange(pageIndex) {
      this.pager.pageIndex = pageIndex;
      this.onSearch();
    },
  }
};
</script>
